<template>
    <div class="main">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default"
            status-icon :rules="rules">
            <el-form-item label="新闻标题" prop="title">
                <el-input v-model="ruleForm.title" placeholder="请输入"/>
            </el-form-item>

            <el-form-item label="新闻类型" prop="type">
                <el-select v-model="ruleForm.type" class="m-2" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.title" />
                </el-select>
            </el-form-item>

            <el-form-item label="新闻封面图" prop="thumbUrl">
                <el-upload :row="ruleForm.thumbUrl" @OK="OKdata"></el-upload>
            </el-form-item>
            <el-form-item label="新闻内容" prop="content">
                <Wangeditor @closeOK="closeOKDataCommodityDetails" :row="ruleForm.content">
                </Wangeditor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="closeAdd()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
// 富文本
import Wangeditor from '@/components/wangeditor/index.vue'
import elUpload from '@/components/elUpload/index.vue'
import { onMounted, reactive, ref } from 'vue'
import { newsUpdate, newsAdd } from '@/api/news.js'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router';
const route = useRoute();
const emit = defineEmits(['closeAdd', 'closeOK'])
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: true, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
onMounted(() => {
    if (!props.isAdd) {
        ruleForm.title = props.row.title; // 初始化表单字段值
        ruleForm.thumbUrl = props.row.thumbUrl; // 初始化表单字段值
        ruleForm.content = props.row.content; // 初始化表单字段值
        ruleForm.type = props.row.type; // 初始化表单字段值
    }
})

const ruleFormRef = ref()
const ruleForm = reactive({
    title: '',
    thumbUrl: '',
    content: '',
    type: ''
})
const rules = reactive({
    type: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    title: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    thumbUrl: [
        { required: true, message: '请上传', trigger: 'change' },
    ],
    content: [
        { required: true, message: '请输入', trigger: 'change' },
    ],
})
// 下拉列表数据
const options = ref([
    { id: 1, title: '新闻' },
    { id: 2, title: '公告' },
    { id: 3, title: '热门活动' },
    { id: 4, title: '热点' },
    { id: 5, title: '其他' },
])

//新闻封面图
const OKdata = (url) => {
    ruleForm.thumbUrl = url;
}

// 新闻内容
const closeOKDataCommodityDetails = (data) => {
    ruleForm.content = data
}

// 表格确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                newsAdd(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })

            } else {
                newsUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const closeAdd = () => {
    emit('closeAdd')
}
</script>

<style lang="scss" scoped>
.is-closable {
    margin-right: 5px;
}

.demo-ruleForm {

    .el-input,
    .el-select {
        width: 300px;
    }

    .el-textarea {
        width: 400px;
    }
}
</style>